<template>
  <div class="title">
    <img
        src="logo.png"
        referrerpolicy="no-referrer"
        class="login-logo"
    />
    <div class="title-text">
      <p class="title-text">数据大屏</p>
    </div>
    <div class="time">
      <div class="time-select">
        <button @click="setTimeRange('today')">今日</button>
        <button @click="setTimeRange('past7days')">近7天</button>
        <button @click="setTimeRange('past30days')">近30天</button>
      </div>
      <!-- ✅ 时间选择框 -->
      <div class="custom-time-range">
        <input type="date" v-model="customStartTime" />
        <span class="word">至</span>
        <input type="date" v-model="customEndTime" />
        <button @click="setCustomTimeRange">确定</button>
      </div>
    </div>

  </div>


  <div class="dashboard">
    <!-- 数据概览 -->

    <div class="overview">
      <div class="overview-card-content">
        <h3>支付GMV</h3>
        <p class="data">¥{{ summary.orderSysSettleMoney.toFixed(1) }}</p>
        <p class="date">{{ currentDate }}</p>
      </div>
      <div class="overview-card">
          <div class="overview-item">
            <h3>🏅有效GMV</h3>
            <p>¥{{ formatNumber(summary.orderSysSettleMoney - summary.refundOrderSysSettleMoney) }}</p>
          </div>
          <div class="overview-item">
            <h3>💣退款金额</h3>
            <p>¥{{ formatNumber(summary.refundOrderSysSettleMoney) }}</p>
          </div>
          <div class="overview-item">
            <h3>⚡️支付单数</h3>
            <p>{{ summary.orderCount }}单</p>
          </div>
          <div class="overview-item">
            <h3>⛓️‍💥退款单数</h3>
            <p>{{ summary.refundOrderCount }}单</p>
          </div>
      </div>

      <!-- 搜索卡片 -->
      <div class="search-card">
        <div class="search-row">
          <div class="search-item">
            <label for="title">商品名称/ID</label>
            <input id="title" v-model="title" placeholder="商品名称/ID" />
          </div>

          <div class="search-item">
            <label for="orderStatus">订单状态</label>
            <select id="orderStatus" v-model="orderStatus">
              <option value="4">全部</option>
              <option value="0">支付完成</option>
              <option value="1">退款</option>
              <option value="2">已结算</option>
              <option value="3">确认收货</option>
            </select>
          </div>
        </div>

        <div class="search-row">
          <div class="search-item">
            <label for="promoterId">达人ID</label>
            <input id="promoterId" v-model="promoterId" placeholder="达人ID" />
          </div>
          <div class="search-item">
            <label for="type">推广者类型</label>
            <select id="type" v-model="type">
              <option value="3">全部</option>
              <option value="1">团长</option>
              <option value="2">达人</option>
            </select>
          </div>
        </div>
        <div class="search-row">
          <button @click="resetFilters">重置</button>
          <button @click="searchOrders">查询</button>
        </div>
      </div>

    </div>

    <!-- 推广者排名和热销商品 -->
    <div class="rankings">
      <div class="ranking">
        <h2>👤推广者排名</h2>
        <table>
          <thead>
          <tr>
            <th class="th-rank">排名</th>
            <th class="th-name">推广者</th>
            <th class="th-type">类型</th>
            <th class="th-num">出单数</th>
            <th class="th-gmv">支付GMV</th>
          </tr>
          </thead>
          <tbody>

          <tr v-for="(item, index) in Array(10).fill(null)" :key="index">
            <td class="th-rank">{{ index + 1 }}</td>
            <td class="th-name"
                @click="copyId(promoters[index].promoteId)"
                :data-tooltip="promoters[index] ? promoters[index].promoteId : ''">
              <template v-if="promoters[index]">{{ promoters[index].promoteName }}</template>
            </td>



            <td class="th-type">
              <template v-if="promoters[index]">
                {{ promoters[index].roleType === 1 ? '团长' : '达人' }}
              </template>
            </td>
            <td class="th-num">
              <template v-if="promoters[index]">{{ promoters[index].totalOrders }}</template>
            </td>
            <td class="th-gmv">
              <template v-if="promoters[index]">¥{{ formatNumber(promoters[index].totalGMV) }}</template>
            </td>
          </tr>
          </tbody>
        </table>
      </div>


      <div class="top-selling">
        <h2>🛒热销商品</h2>
        <table>
          <thead>
          <tr>
            <th class="th-rank">排名</th>
            <th class="th-image">商品图片</th>
            <th class="th-name">商品名称</th>
            <th class="th-sales">销量</th>
          </tr>
          </thead>

          <tbody>
          <tr v-for="(item, index) in Array(10).fill(null)" :key="index">
            <td class="th-rank">{{ index + 1 }}</td>
            <td class="th-image">
              <template v-if="topSellingGoods[index]">
                <img
                    :src="topSellingGoods[index].relateProductImg || 'https://via.placeholder.com/50'"
                    alt="商品图片"
                    class="goods-image"
                />
              </template>
            </td>
            <td class="th-name">
              <template v-if="topSellingGoods[index]">
                {{ truncateText(topSellingGoods[index].relateProductName, 10) }}
              </template>
            </td>
            <td class="th-sales">
              <template v-if="topSellingGoods[index]">
                {{ topSellingGoods[index].orderNum }}
              </template>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 订单信息（带分页） -->
    <div class="orders">
      <h2>订单信息</h2>
      <div class="orders-list">
        <table class="orders-table">
          <thead>
          <tr>
            <th class="col-image"></th>
            <th class="col-name">商品名称</th>
            <th class="col-amount">订单金额</th>
            <th class="col-fee">服务费</th>
            <th class="col-promoter">推广者</th>
            <th class="col-time">支付时间</th>
            <th class="col-status">订单状态</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="order in orders" :key="order.relateOrderNo" class="order-item">
            <td class="col-image">
              <img :src="order.relateProductImg" alt="订单图片" class="order-image" />
            </td>
            <td class="col-name">
              {{ fixedLengthText(truncateText(order.relateProductName, 15), 15) }}
            </td>
            <td class="col-amount">
              ¥{{ order.sysSettleMoney.toFixed(2) }}
            </td>
            <td class="col-fee">
              ¥{{ order.sysRelateServiceMoneyIn.toFixed(2) }}
            </td>
            <td class="col-promoter">
              {{ fixedLengthText(truncateText(order.promoteName, 10), 15) }}
            </td>
            <td class="col-time">
              {{ formatPayTime(order.orderPayTime) }}
            </td>
            <td class="col-status">
              {{ getOrderStatus(order.status) }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页按钮 -->
      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <span>第 {{ currentPage }} 页</span>
        <button @click="nextPage" :disabled="!hasNextPage">下一页</button>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      currentDate: new Date().toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).replace(/\//g, '-'),
      customStartTime: "",  // 自定义开始时间
      customEndTime: "",    // 自定义结束时间
      formattedStartTime: "",
      formattedEndTime: "",
      currentPage: 1, // 当前页码
      lastPage: 1,
      type: 3,
      promoterId: "",
      title: "",
      orderStatus: 4,
      hasNextPage: false, // 是否有下一页
      summary: {
        orderCount: 0,
        orderSysSettleMoney: 0,
        orderLeaderSysServiceMoney: 0,
        refundOrderCount: 0,
        refundOrderSysSettleMoney: 0,
        refundOrderLeaderSysServiceMoney: 0,
      },
      orders: [],
      promoters: [],
      topSellingGoods: [],
      intervalId: null, // 存储定时器ID
    };
  },
  computed: {
    getOrderStatus() {
      return (status) => {
        switch (status) {
          case 0:
            return "支付完成";
          case 1:
            return "退款";
          case 2:
            return "已结算";
          case 3:
            return "确认收货";
          default:
            return "未知状态";
        }
      };
    }
  },

  methods: {

    formatNumber(value) {
      return value.toFixed(1); // 保留一位小数
    },
    copyId(id) {
      if (!id) return;
      navigator.clipboard.writeText(id).then(() => {
        this.showToast(`推广者ID ${id} 已复制到剪贴板！`);
      }).catch(() => {
        this.showToast('复制失败，请手动复制！');
      });
    },

    showToast(message) {
      // 动态创建气泡消息
      const toast = document.createElement('div');
      toast.className = 'toast';
      toast.textContent = message;

      // 将气泡消息添加到页面中
      document.body.appendChild(toast);

      // 显示气泡消息
      setTimeout(() => {
        toast.classList.add('show');
      }, 10);

      // 2秒后自动隐藏并移除
      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => {
          toast.remove();
        }, 300);
      }, 2000);
    },

    fixedLengthText(text, length) {
      if (text.length >= length) {
        return text;
      }
      return text + " ".repeat(length - text.length); // 不足的部分用空格补齐
    },
    truncateText(text, length) {
      if (text.length > length) {
        return text.substring(0, length) + "...";
      }
      return text;
    },
    setTimeRange(range) {
      const now = new Date();
      let startTime, endTime;

      switch (range) {
        case "today":
          startTime = new Date(now.setHours(0, 0, 0, 0));
          endTime = new Date(now.setHours(23, 59, 59, 999));
          this.currentDate = new Date().toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          }).replace(/\//g, '-')
          break;
        case "past7days":
          startTime = new Date(now.setDate(now.getDate() - 7));
          startTime.setHours(0, 0, 0, 0);
          endTime = new Date();
          break;
        case "past30days":
          startTime = new Date(now.setDate(now.getDate() - 30));
          startTime.setHours(0, 0, 0, 0);
          endTime = new Date();
          break;
        default:
          startTime = new Date();
          endTime = new Date();
      }
      const formatter = new Intl.DateTimeFormat('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'});

      function formatDate(date) {
        return formatter.format(date).replace(/\//g, '-');
      }

      this.formattedStartTime = formatDate(startTime);
      this.formattedEndTime = formatDate(endTime);

      this.fetchSummaryData();
      this.currentPage = 1;
      this.fetchPromoterRankingData();
      this.fetchOrderData();
      this.fetchSellingGoodsRanking();
    },
    setCustomTimeRange() {
      if (!this.customStartTime || !this.customEndTime) {
        alert("请选择完整的开始和结束时间！");
        return;
      }

      // 检查时间顺序是否合理
      if (new Date(this.customStartTime) > new Date(this.customEndTime)) {
        alert("开始时间不能晚于结束时间！");
        return;
      }

      // 设置格式化时间
      this.formattedStartTime = this.customStartTime;
      this.formattedEndTime = this.customEndTime;

      // 更新数据
      this.fetchSummaryData();
      this.currentPage = 1;
      this.fetchPromoterRankingData();
      this.fetchOrderData();
      this.fetchSellingGoodsRanking();
    },
    resetFilters() {
      this.title = "";
      this.orderStatus = 0;
      this.type = 3;
      this.promoterId = "";
      this.fetchOrderData();
      this.fetchSummaryData();
    },

    // 查询按钮事件
    searchOrders() {
      // 这里更新查询参数，重新拉取数据
      this.fetchOrderData();
      this.fetchSummaryData();
    },
    async fetchSummaryData() {
      try {
        const response = await fetch(
            `http://localhost:5000/api/summary/get_order_summary?start_time=${this.formattedStartTime}&end_time=${this.formattedEndTime}&page=1&status=${this.orderStatus}&title=${this.title}&extend_type=${this.type}&promoterId=${this.promoterId}`,
        );
        const result = await response.json();
        if (result.error) {
          console.error(result.error);
        } else {
          this.summary = result;
        }
      } catch (error) {
        console.error("获取订单汇总失败:", error);
      }
    },

    async fetchPromoterRankingData() {
      try {
        const response = await fetch(
            `http://localhost:5000/api/influencers/get_influencers_Ranking?start_time=${this.formattedStartTime}&end_time=${this.formattedEndTime}&page=${this.currentPage}&type=${this.type}&promoterId=${this.promoterId}`,
        );
        const result = await response.json();

        if (result.success) {
          this.promoters = result.ranking;
        } else {
          console.error(result.message);
          this.promoters = [];
        }
      } catch (error) {
        console.error("获取推广者排名失败:", error);
      }
    },

    async fetchSellingGoodsRanking() {
      try {
        const response = await fetch(`http://localhost:5000/api/sellingGoods/get_sellingGoods_ranking?start_date=${this.formattedStartTime}&end_date=${this.formattedEndTime}&page=1`);
        const result = await response.json();

        if (result.goods && Array.isArray(result.goods)) {
          this.topSellingGoods = result.goods;
        } else {
          console.error("返回数据格式错误:", result);
          this.topSellingGoods = [];
        }
      } catch (error) {
        console.error("获取热销商品失败:", error);
        this.topSellingGoods = [];
      }
    },

    async fetchOrderData() {
      try {
        const response = await fetch(
            `http://localhost:5000/api/orders/get_orders?start_time=${this.formattedStartTime}&end_time=${this.formattedEndTime}&page=${this.currentPage}&status=${this.orderStatus}&title=${this.title}&extend_type=${this.type}&promoterId=${this.promoterId}`,
        );
        const result = await response.json();

        if (result.success) {
          // 判断是否有数据变化，只有变化时才更新
          if (JSON.stringify(result.orders) !== JSON.stringify(this.orders)) {
            this.orders = result.orders || [];
            this.hasNextPage = this.currentPage < result.lastpage; // 判断是否有下一页
            this.lastPage = result.lastpage; // 更新总页数
          }
        } else {
          console.error(result.message);
          this.orders = [];
          this.hasNextPage = false;
        }
      } catch (error) {
        console.error("获取订单信息失败:", error);
      }
    },

    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchOrderData();
      }
    },

    nextPage() {
      if (this.hasNextPage) {
        this.currentPage++;
        this.fetchOrderData();
      }
    },

    formatPayTime(payTime) {
      if (!payTime) return '';
      const date = new Date(payTime);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    }
  },
  created() {
    this.setTimeRange("today");
    // 每秒请求一次数据
    this.intervalId = setInterval(() => {
      this.fetchOrderData();
      this.fetchSummaryData();
      this.fetchPromoterRankingData();
      this.fetchSellingGoodsRanking();
    }, 2000); // 每1000毫秒请求一次数据
  },
  beforeDestroy() {
    // 清除定时器，避免内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
};
</script>


<style>
body {

  margin: 0;
  padding: 0;
}

.title {
  position: relative;
  width: 98%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: -3vw;
  left: 50%; /* 让左边缘到父元素的一半 */
  transform: translateX(-50%); /* 向左移动自身宽度的一半，实现真正居中 */
  padding: 0px 20px;
  margin: 0;
}

.login-logo {
  position: relative;
  height: 90px;
  top: -10px;
}
.title-text {
  position: relative;
  font-size: 7vw;
  top: -1vw;
  left: -1vw;
  text-align: center;

  /* 字体设置 */
  font-family: "Arial", "Helvetica", sans-serif; /* 设置字体系列 */
  font-weight: bold; /* 设置字体粗细 */
  color: #333; /* 设置字体颜色 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

.time-select {
  position: relative;
  top: -15px; /* 距离顶部 20px */
  right: 0px; /* 靠右 20px */
  display: flex;
  gap: 18px;
}


.time-select button {
  position: relative;
  padding: 0.9vw 1.2vw;
  width: 9vw;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.time-select button:hover {
  background-color: #0056b3;
}
.time-select {
  display: flex;
  width: 102.3%;
  left: -0.9vw;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.word {
  position: relative;
  left: -0.9vw;
  font-size: 1.5vw;
}
.custom-time-range {
  display: flex;
  gap: 5px;
  align-items: center;
}

input[type="date"] {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.title button,select,input {
  flex: 1;
  padding: 8px;
  width: 12vw;
  border-radius: 4px;
  border: 1px solid #ddd;
  appearance: none; /* 去掉默认下拉箭头样式 */
  font-size: 1.3vw;
}

.title select {
  background-color: white; /* 统一背景色 */
}

.title button {
  padding: 3px 7px;
  height: 3vw;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.dashboard {
  position: relative;
  width: 92%;

  left: 50%; /* 让左边缘到父元素的一半 */
  transform: translateX(-50%); /* 向左移动自身宽度的一半，实现真正居中 */
  font-family: Arial, sans-serif;
  padding: 20px;
  border-radius: 8px;
  background-color: #fdbc00;
  top: -5vw;
}

.overview {
  background-color: #fdbc00;
  position: relative;
    display: flex;
  gap: 10px;
  height: 20vw;
  /*  margin-bottom: 20px;*/
}

.overview-card-content {
  width: 27%;
  position: relative;
  padding: 20px;
  border-radius: 8px;
  /*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
  flex: 1;
}

.date {
  position: absolute;
  top: 0vw;
  right: 0px;
  font-size: 2vw;
  font-weight: bold;
}

.data {
  position: absolute;
  top: 4vw;
  left: 50%; /* 让左边缘到父元素的一半 */
  transform: translateX(-50%); /* 向左移动自身宽度的一半，实现真正居中 */
  font-size: 5vw;
}

.overview-card-content h3 {
  position: absolute;
  left: 0.2vw;
  top: -2vw;
  font-size: 3vw;
}


.overview-card {
  position: relative;
  left: 0%;
  width: 34%;
  height: 70%;
  background-color: white;
/*  top: -3vw; */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.overview-card h3 {
  top: -2vw;
  position: relative;
  margin-bottom: -2vw;
  font-size: 1.3vw;
  color: #333;

  /* 圆角底框 */
  background-color: rgba(253, 188, 0, 0.3); /* 使用半透明的 #fdbc00 */
  padding: 0.7vw 1vw; /* 内边距 */
  border-radius: 1vw; /* 圆角效果 */
  display: inline-block; /* 让背景包裹文字 */
}


.overview-card p {
  font-size: 1.8vw;
  color: #000000;
  margin: 0.1vw 0;
}

.overview-card .date {
  font-size: 1.3vw;
  color: #888;
}


.overview-item {
  text-align: center;
}

.search-card {
  position: relative;
  background-color: white;
  width: 30%;
  height: 70%;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-row {
  position: relative;
  top: -1vw;
  display: flex;
  gap: 1vw;
  margin-bottom: 0.8vw;
  justify-content: space-between;
  font-size: 1.2vw;
}
.search-item {
  display: flex;
  top: -3vw;
  flex-direction: column;
  gap: 4px; /* 间距调整 */
  flex: 1; /* 自适应宽度 */
}

label {
  position: relative;
  font-size: 1vw;
  color: #333;
  margin-bottom: 2px;
  left: -1vw;
  font-weight: bold;
}
.search-card button, select, input {
  position: relative;
  flex: 1;
  padding: 8px;
  width: 14vw;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
.search-card select, input{
  left: -1vw;
}

.search-card button {
  padding: 8px 12px;
  height: 3vw;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0.5vw;
  cursor: pointer;
  font-size: 1vw;
}

button:hover {
  background-color: #0056b3;
}

/* ========================== */
/* ✅ 公共样式（不变） */
/* ========================== */
.rankings {
  position: relative;
  display: flex;
  top: 1.5vw;
  gap: 20px;
  align-items: stretch;
}

/* ✅ 让两个模块等宽 */
.ranking, .top-selling {
  position: relative;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
  height: 30vw; /* 固定高度 */
  display: flex;
  flex-direction: column;
  font-size: 1vw;
}

/* ✅ 让 h2 统一风格 */
.ranking h2, .top-selling h2 {
  position: relative;
  top: -2vw;
  margin-bottom: 0vw;
  font-size: 1.5em;
  color: #333;
  text-align: center;
}
/* ========================== */
/* 🎯 推广者排名 ranking 样式 */
/* ========================== */
.ranking table {
  width: 36vw;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 🎯 ranking 表头样式 */
.ranking thead {
  display: table;
  width: 93.5%;
  height: 2vw;
  table-layout: fixed;
  background-color: #f8d7da; /* 浅红色表头 */
  color: #721c24;
}

/* 🎯 ranking tbody 滚动 */
.ranking tbody {
  display: block;
  width: 100%;
  height: 24vw;
  overflow-y: auto;
}

/* 🎯 ranking 行样式 */
.ranking tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 🎯 ranking 让 th 和 td 共享宽度 */
.ranking th, .ranking td {
  text-align: center;
  padding: 1vw;
  border-bottom: none; /* 不要表格线 */
}
/* 气泡样式 */
.th-name {
  position: relative;
  cursor: pointer;
/*  color: #007bff;*/
}

.th-name:hover {
/*  color: #0056b3;*/
}

/* 自定义气泡 */
.th-name::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 10%; /* 气泡在上方 */
  left: 120%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none; /* 防止气泡干扰鼠标事件 */
  z-index: 9999;
  font-size: 1.2vw;
}

.th-name:hover::after {
  opacity: 1;
}

/*!* 🎯 ranking 特定列宽度 *!
.ranking .th-name { width: 200px; }
.ranking .th-type { width: 100px; }
.ranking .th-orders { width: 100px; }
.ranking .th-gmv { width: 120px; }*/

/* 🎯 ranking 隐藏表格线 */
.ranking th, .ranking td {
  border-bottom: none; /* 不要分割线 */
}
.ranking .th-rank { width: 1vw; }
.ranking .th-name{ width: 5vw; }
.ranking .th-type { width: 3vw; }
.ranking .th-num { width: 2vw; }
.ranking .th-gmv {width: 4vw;}
/* ========================== */
/* 🎯 热销商品 top-selling 样式 */
/* ========================== */
.top-selling table {
  width: 40vw;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 🎯 top-selling 表头样式 */
.top-selling thead {
  display: table;
  width: 94%;
  height: 2vw;
  table-layout: fixed;
  background-color: #d4edda; /* 浅绿色表头 */
  color: #155724;
}

/* 🎯 top-selling tbody 滚动 */
.top-selling tbody {
  display: block;
  width: 100%;
  height: 23vw;
  overflow-y: auto;
  font-size: 1.2vw;
}

/* 🎯 top-selling 行样式 */
.top-selling tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 🎯 top-selling 让 th 和 td 共享宽度 */
.top-selling th, .top-selling td {
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid #ddd; /* 有分割线 */
}

/* 🎯 top-selling 特定列宽度 */
.top-selling .th-rank { width: 2vw; }
.top-selling .th-image { width: 4vw; }
.top-selling .th-name { width: 10vw; }
.top-selling .th-sales { width: 4vw; }

/* 🎯 top-selling 图片 */
.goods-image {
  width: 2vw;
  object-fit: cover;
}
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1vw;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10000; /* 确保在最上层 */
}

.toast.show {
  opacity: 0.9;
}
.orders {
  position: relative;
  font-family: Arial, sans-serif;
  padding: 1vw;
  background-color: #ffffff;
  border-radius: 8px;
  top: 25px;
  margin-bottom: 50px;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th, .orders-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  font-size: 1.5vw;
  white-space: nowrap;
}

.orders-table th {
  background-color: #f4f4f9;
  font-weight: bold;
  color: #333;
}
/* 去掉表格线 */
.orders-table, .orders-table th, .orders-table td {
  border: none;
}
.order-item {
  background-color: #f4f4f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.order-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.orders-table td {
  background-color: #fafafa;
}

/* 单独控制每一列的宽度 */
.col-image {
  width: 8%; /* 图片较窄 */
}

.col-name {
  width: 32%; /* 商品名称较宽 */
}

.col-amount,
.col-fee {
  width: 6%; /* 金额和服务费适中 */
}

.col-promoter {
  width: 18%; /* 推广者名称稍宽 */
}

.col-time {
  width: 20%; /* 支付时间宽一点 */
}

.col-status {
  width: 10%; /* 订单状态窄一些 */
}

.order-image {
  width: 2.5vw;
  height: auto;
  border-radius: 8px;
}

.order-item:hover {
  background-color: #f0f8ff;
}

/* 分页按钮样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.pagination button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

</style>
